Vue Display Json Data in Table

Vue Js Display JSON Data In Table – To display JSON data in a table using Vue.js, we can use the v-for directive to iterate over the array of objects and generate table rows for each object. The v-for directive has a special syntax that allows us to create an alias for each object element being iterated on, and reference it in the template code. In this case, we can create an alias called “item” and use it to access the properties of each object. Using this technique, we can generate HTML code for each row of the table, and display the relevant data in each column using the {{ }} syntax. Overall, this allows us to dynamically generate a table from JSON data using Vue.js.

How to Display JSON Data in html using Vue Js?

This code demonstrates how to display JSON data in a table using Vue.js.

The HTML code defines a div element with an id of app that contains a table element with a thead and tbody element. The thead element defines the table headers, and the tbody element contains the table data.

The v-for directive is used to iterate over the collegeData array in the data object of the Vue instance. For each item in the collegeData array, a table row is created using the tr element. Within each row, the td elements are used to display the values of the id, collegeName, and city properties of the current item.

In the JavaScript code, a new Vue instance is created and attached to the #app element. The data function returns an object with a single property collegeData, which is an array of objects that represent the college data. The collegeData array is used in the HTML code to render the table.

Overall, this code demonstrates how Vue.js can be used to efficiently render JSON data in a table format.

Example 1: Create Table from json in Vue Js (Options APi)

<div id="app">
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>College Name</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='item in collegeData'>
          <td>{{item.id}}</td>
          <td>{{item.collegeName}}</td>
          <td>{{item.city}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          collegeData: [
            {
              'id': 1,
              'collegeName': 'Harvard University',
              'city': 'Cambridge, MA, USA'
            },
            {
              'id': 2,
              'collegeName': 'Stanford University.',
              'city': '450 Serra Mall, Stanford, USA'
            },
            {
              'id': 3,
              'collegeName': 'Massachusetts Institute of Technology',
              'city': '77 Massachusetts Ave, Cambridge, USA'
            },
          ]
        }
      },
    });
</script>

Output of Vue Display JSON data as table

Vue Show JSON Data in Table (Composition API)

<div id="app">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in jsonData" :key="index">
                <td>{{ item.name }}</td>
                <td>{{ item.email }}</td>
                <td>{{ item.age }}</td>
            </tr>
        </tbody>
    </table>
</div>
<script type="module">
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            const jsonData = ref([
                { name: 'John Doe', email: 'john@example.com', age: 30 },
                { name: 'Jane Smith', email: 'jane@example.com', age: 25 },
                { name: 'Bob Johnson', email: 'bob@example.com', age: 40 }
            ]);

            return { jsonData };
        }
    }).mount("#app");
</script>